<template>
    <div class="modal fade" id="customerInfoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" style="width: 1300px;">
            <div class="modal-content" style="width: 1300px;">
                <div class="modal-header">
                    <button type="button" class="close" @click="canel"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">客户详情</h4>
                </div>
                <div class="modal-body">
                    <div class="main-content">
                        <div class="concent_title" >
                            <ul class="info_list">
                                <li>
                                    <p>客户姓名:</p>
                                    <font>{{cusPre.name}}</font>
                                </li>
                                <li>
                                    <p>客户性别:</p>
                                    <font>{{cusPre.genderName}}</font>
                                </li>
                                <li>
                                    <p>客户年龄:</p>
                                    <font>{{customerInfo.ageRange}}</font>
                                </li>
                                <li>
                                    <p>客户电话:</p>
                                    <font>{{cusPre.mobile}}</font>
                                </li>
                                <li>
                                    <p>意向级别:</p>
                                    <font>{{customerInfo.intentionLevel}}</font>
                                </li>
                                <li>&nbsp;</li>
                            </ul>
                            <ul class="info_list">
                                <li style="width: 100%; font-weight: bold;">
                                    <p>报备到访楼盘</p>
                                </li>
                                <li>
                                    <p>报备楼盘:</p>
                                    <font>{{cusPre.premisesName}}</font>
                                </li>
                                <li>
                                    <p>分销渠道:</p>
                                    <font>{{cusPre.staffCompanyName}}</font>
                                </li>
                                <li>
                                    <p>来访次数:</p>
                                    <font>{{cusPre.visitState}}</font>
                                </li>
                                <li v-for>
                                    <p>首次来访日期:</p>
                                    <font>{{cusPre.visitTime}}</font>
                                </li>
                                <li v-for="(item, index) in repeatVisitFollow" v-show="repeatVisitFollow.length > 0">
                                    <p>第{{ item.visitedCount }}次来访日期:</p>
                                    <font>{{item.visitTime}}</font>
                                </li>
                                <li>
                                    <p>置业顾问:</p>
                                    <font>{{customerInfo.adviserName}}</font>
                                </li>
                                <li>
                                    <p>置业顾问电话:</p>
                                    <font>{{customerInfo.adviserPhone}}</font>
                                </li>
                            </ul>
                            <ul class="info_list">
                                <li style="width: 100%; font-weight: bold;">
                                    <p>更多信息</p>
                                </li>
                                <li style="width: 100%;">
                                    <p>从事行业:</p>
                                    <font>{{customerInfo.industry}}</font>
                                </li>
                                <li style="width: 100%;">
                                    <p>职位描述:</p>
                                    <font>{{customerInfo.jobDesc}}</font>
                                </li>
                                <li>
                                    <p>交通工具:</p>
                                    <font>{{customerInfo.vehicle}}</font>
                                </li>
                                <li>
                                    <p>认知途径:</p>
                                    <font>{{customerInfo.cognitiveChannel}}</font>
                                </li>
                                <li>
                                    <p>家庭结构:</p>
                                    <font>{{customerInfo.familyStructure}}</font>
                                </li>
                                <li>
                                    <p>穿着打扮:</p>
                                    <font>{{customerInfo.dressUp}}</font>
                                </li>
                                <li>
                                    <p>和谁一起来的:</p>
                                    <font>{{customerInfo.visitTogether}}</font>
                                </li>
                                <li>
                                    <p>工作来往城市及区域:</p>
                                    <font>{{customerInfo.workCity}}</font>
                                </li>
                                <li>
                                    <p>性格特点:</p>
                                    <font>{{customerInfo.nature}}</font>
                                </li>
                                <li>
                                    <p>置业经历:</p>
                                    <font>{{customerInfo.houseExperien}}</font>
                                </li>
                                <li>
                                    <p>均为何处房产:</p>
                                    <font>{{customerInfo.houseAddress}}</font>
                                </li>
                                <li>
                                    <p>投资预算:</p>
                                    <font>{{customerInfo.budget}}</font>
                                </li>
                                <li>
                                    <p>付款方式:</p>
                                    <font>{{customerInfo.payMethod}}</font>
                                </li>
                                <li>
                                    <p>为何采取此方式付款:</p>
                                    <font>{{customerInfo.payWhy}}</font>
                                </li>
                                <li>
                                    <p>房主与到访客户关系:</p>
                                    <font>{{customerInfo.relation}}</font>
                                </li>
                                <li>
                                    <p>资金实力:</p>
                                    <font>{{customerInfo.deepPocket}}</font>
                                </li>
                                <li>
                                    <p>决策人:</p>
                                    <font>{{customerInfo.policymaker}}</font>
                                </li>
                                <li>
                                    <p>本地/外地:</p>
                                    <font>{{customerInfo.isLocal}}</font>
                                </li>
                                <li>
                                    <p>做过哪些类型投资:</p>
                                    <font>{{customerInfo.investment}}</font>
                                </li>
                                <li>
                                    <p>对投资类产品是否了解:</p>
                                    <font>{{customerInfo.didKnowInvestment}}</font>
                                </li>
                                <li style="width: 100%">
                                    <p>对本案兴趣点:</p>
                                    <font>{{customerInfo.focus}}</font>
                                </li>
                                <li style="width: 100%">
                                    <p>对本案产品建议:</p>
                                    <font>{{customerInfo.suggest}}</font>
                                </li>
                                <li style="width: 100%">
                                    <p>对比项目:</p>
                                    <font>{{customerInfo.compare}}</font>
                                </li>
                                <li style="width: 100%">
                                    <p>对比项目为何没买:</p>
                                    <font>{{customerInfo.notBuy}}</font>
                                </li>
                                <li style="width: 100%">
                                    <p>上门接待过程:</p>
                                    <font>{{customerInfo.reception}}</font>
                                </li>
                            </ul>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import viewer from '../../assets/js/viewer.js'
    import {API, Log, Utils, Service} from '../../js/base'
    export default {
        props: ["cusPre", "estateAdviser", "customerInfo", "repeatVisitFollow"],
        data() {
            return {
            }
        },
        mounted: function() {
        },
        watch: {
        },
        components: {
        },
        methods: {
            canel(){
                var _self = this;
                $("#customerInfoModal").modal("hide");
            }
        }
    }
</script>

<style scoped>
    .template-list:after {
        content: '';
        display: block;
        clear: both;
        visibility: hidden;
        overflow: hidden;
        font-size: 0;
        height: 0
    }
    .declare-follow-list {float: left;width: 100px;height: 80px;overflow: hidden;margin-left: 10px;position: relative;}
    .declare-follow-list img {width: 100%;height: 100%;}
    .declare-follow-list .mask-page {position: absolute;bottom: 0;left: 0;width: 100%;height: 20px;background-color: #000;opacity: 0.5;display: none;}
    .declare-follow-list .operation-btn {position: absolute;bottom: 0;left: 0;width: 100%;height: 20px;display: none;}
    .declare-follow-list .operation-btn a {color: #fff;line-height: 20px;text-align: center;width: 100%;display: inline-block;}
    .declare-follow-list:hover .mask-page {display: inline-block}
    .declare-follow-list:hover .operation-btn {display: inline-block}
    .concent_title{width: 100%; min-height:210px;float: left;margin: 5px 10px;border:1px solid #d7d7d7;}
    .info_list{margin-bottom: 0px; border-bottom: 1px solid #999;}
    .info_list li{margin-bottom: 5px;line-height:25px; float: left; width: 33%;}
    .info_list li p {width: 125px;}
    .concent_sub{float: left;width: 50%;}
    .modal-body{margin: 10px 0;height: 700px;overflow: scroll;}
    .checkMobileDesc{color: red; font-size: 14px}
    .checkMobileBtn{padding: 0px 5px;}
</style>